<template>
  <div class="bg-style">
    <i-pageBody class="add_i-color">
      <div slot="page-main">
        <div class="container container-space container-space--vertical">
          <div class="container-space__child">
            <Button type="primary" @click="handleCreate">新增</Button>
            <Button type="default" @click="handleAction">执行</Button>
          </div>
          <div class="container-space__child">
            <Table
              :columns="columns"
              :data="data"
              stripe
              border
              show-summary
              :summary-method="handleSummary"
            ></Table>
          </div>
          <div class="container-space__child" v-show="data.length > 0">
            <div class="container-page">
              <PageHeader
                :total="formdata.total"
                :page-size="formdata.pageSize"
                :page="formdata.page"
              ></PageHeader>
              <Page
                :total="formdata.total"
                :page-size="formdata.pageSize"
                show-sizer
              />
            </div>
          </div>
        </div>
      </div>
    </i-pageBody>
    <Modal v-model="edit.modal" width="600" title="编辑">
      <div>
        <Form
          ref="editForm"
          :model="edit.formdata"
          :rules="edit.rules"
          :label-width="120"
        >
          <FormItem prop="username" label="选择用户：">
            <Select v-model="edit.formdata.username" placeholder="请选择用户">
              <Option value="beijing">北京市</Option>
              <Option value="shanghai">上海市</Option>
              <Option value="shenzhen">深圳市</Option>
            </Select>
          </FormItem>
          <FormItem prop="device" label="选择设备：">
            <Select
              v-model="edit.formdata.device"
              placeholder="请选择设备"
              style="100%"
            >
              <Option value="beijing">北京市</Option>
              <Option value="shanghai">上海市</Option>
              <Option value="shenzhen">深圳市</Option>
            </Select>
          </FormItem>
          <FormItem prop="load" label="可调负荷：">
            <div class="container-space">
              <InputNumber
                :min="0"
                style="width:120px"
                v-model="edit.formdata.load"
                class="container-space__child"
              ></InputNumber>
              <span class="container-space__child">kW</span>
            </div>
          </FormItem>
          <FormItem prop="status" label="状态设置：">
            <RadioGroup v-model="edit.formdata.status">
              <Radio label="yes">开</Radio>
              <Radio label="no">关</Radio>
            </RadioGroup>
          </FormItem>
        </Form>
      </div>
      <div slot="footer">
        <Button type="default" @click="edit.modal = false">
          取消
        </Button>
        <Button type="primary" @click="handleSubmit">
          保存
        </Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import PageHeader from "../components/page-header";
import { TABLE_DECOMPOSE_COLUNMS } from "./constants";
export default {
  name: "decompose",
  props: {},
  data() {
    const columns = [
      ...TABLE_DECOMPOSE_COLUNMS,
      {
        title: "操作",
        width: 200,
        fixed: "right",
        align: "center",
        render: (h, params) => {
          return h("span", [
            h(
              "Button",
              {
                props: {
                  type: "default",
                  size: "small"
                },
                style: {
                  "margin-right": "8px"
                },
                nativeOn: {
                  click: () => {
                    this.handleUpdate(params);
                  }
                }
              },
              "修改"
            ),
            h(
              "Button",
              {
                props: {
                  type: "error",
                  size: "small"
                },
                nativeOn: {
                  click: () => {
                    this.handleDelete(params);
                  }
                }
              },
              "删除"
            )
          ]);
        }
      }
    ];

    return {
      formdata: {
        page: 1,
        pageSize: 10,
        total: 0
      },
      columns,
      data: [],
      edit: {
        modal: false,
        formdata: {
          username: "",
          device: "",
          load: 0,
          status: ""
        },
        rules: {
          username: [
            {
              required: true,
              message: "请选择用户",
              trigger: "change"
            }
          ],
          status: [
            {
              required: true,
              message: "请设置状态",
              trigger: "change"
            }
          ]
        }
      }
    };
  },
  computed: {},
  created() {},
  mounted() {},
  watch: {},
  methods: {
    handleSubmit() {
      //this.$refs.editForm.resetFields();
      this.$refs.editForm.validate((valid) => {
        console.log(valid);
      });
    },
    handleCreate() {
      this.edit.modal = true;
    },
    handleAction() {},
    handleUpdate({ row, index }) {
      this.edit.modal = true;
    },
    handleDelete({ row, index }) {
      this.$Modal.confirm({
        title: "提示",
        content: "是否确定删除？",
        onOk: () => {
          this.$Message.info("Clicked ok");
        },
        onCancel: () => {
          this.$Message.info("Clicked cancel");
        }
      });
    },
    handleSummary({ columns, data }) {
      const sums = {};
      columns.forEach((column, index) => {
        const key = column.key;
        if (index === 0) {
          sums[key] = {
            key,
            value: "总计"
          };
          return;
        } else if (key === "age") {
          const value = data
            .map((item) => Number(item[key]))
            .filter((element) => !isNaN(element))
            .reduce((prev, next) => prev + next, 0);
          sums[key] = {
            key,
            value
          };
        } else {
          sums[key] = {
            key,
            value: ""
          };
        }
      });
      return sums;
    }
  },
  components: { PageHeader }
};
</script>
<style scoped lang="scss">
  /deep/ .ivu-table-tip table tr td {
    text-align: center;
    background-image: url("~@/assets/img/zwsj.png");
    background-position: center 60px;
    background-repeat: no-repeat;
    color: #999;
    height: 369px;
    background-size: 190px;
    span {
      display: none;
    }
  }
.bg-style {
  background: url(~@/assets/img/welcome.png) center no-repeat;
  background-size: contain;
  width: 100%;
  height: 100%;
}
.container {
  padding: 20px;
  height: 100%;
  overflow: auto;
}
.container-title {
  padding-left: 10px;
  font-size: 16px;
  color: #333;
  position: relative;
}
.container-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  display: inline-block;
  width: 4px;
  height: 16px;
  background-color: #0893fd;
  line-height: 16px;
}

.container-space > .container-space__child:not(:last-child) {
  margin-right: 20px;
}
.container-space.container-space--vertical
  > .container-space__child:not(:last-child) {
  margin-bottom: 20px;
  margin-right: 0;
}
.container-space--inner {
  padding: 20px;
}

.container-align--center {
  text-align: center;
}
.container-align--right {
  text-align: right;
}
.container-page {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
